
<template>
  <div class="notice" :style="containerStyle">
    <!-- 公告 -->
    <div class="notice-bar" :style="noticeBarStyle">
      <el-icon class="notice-icon" :style="iconStyle">
        <component :is="noticeIcon" />
      </el-icon>
      <div class="notice-content" :style="contentStyle">
        {{ data.text }}
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Bell } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`
  }
})

// 计算公告栏样式
const noticeBarStyle = computed(() => {
  return {
    backgroundColor: props.data.backgroundColor || '#fffbe6',
    borderRadius: `${props.data.borderRadius || 4}px`,
    padding: `${props.data.padding || 10}px`
  }
})

// 计算图标样式
const iconStyle = computed(() => {
  return {
    color: props.data.iconColor || '#e6a23c',
    fontSize: `${props.data.iconSize || 16}px`
  }
})

// 计算内容样式
const contentStyle = computed(() => {
  return {
    color: props.data.textColor || '#e6a23c',
    fontSize: `${props.data.fontSize || 14}px`,
    fontWeight: props.data.fontWeight || 'normal'
  }
})

// 公告图标
const noticeIcon = computed(() => {
  return props.data.iconType || Bell
})
</script>

<style lang="scss" scoped>
.notice {
  width: 100%;
  box-sizing: border-box;

  .notice-bar {
    display: flex;
    align-items: center;

    .notice-icon {
      margin-right: 8px;
      flex-shrink: 0;
    }

    .notice-content {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
